<template>
     <head>
     <meta charset="UTF-8">
      <title>CreateClub
      </title>
    </head>

    <el-container>
    <el-header>
    <el-breadcrumb separator="/">
     <el-breadcrumb-item :to="{path:'/club'}">社团</el-breadcrumb-item>
     <el-breadcrumb-item :to="{path:'/createclub'}">创建社团</el-breadcrumb-item>
    </el-breadcrumb>
     </el-header>
    <el-main>
        <div class="CreateClubTable">

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="社团名称" prop="clubname">
    <el-input v-model="ruleForm.clubname"></el-input>
  </el-form-item>
  <el-form-item label="社长姓名" prop="leadername">
    <el-input v-model="ruleForm.leadername"></el-input>
  </el-form-item>
  <el-form-item label="社长学号" prop="leaderID">
    <el-input v-model="ruleForm.leaderID"></el-input>
  </el-form-item>
  <el-form-item label="业务指导老师" prop="teacherName">
    <el-input v-model="ruleForm.teacherName"></el-input>
  </el-form-item>
  <el-form-item label="业务指导老师电话" prop="teacherPhone">
    <el-input v-model="ruleForm.teacherPhone"></el-input>
  </el-form-item>
  <el-form-item label="社团联系电话" prop="clubPhone">
    <el-input v-model="ruleForm.clubPhone"></el-input>
  </el-form-item>
  <el-form-item label="社团联系邮箱" prop="clubMail">
    <el-input v-model="ruleForm.clubMail"></el-input>
  </el-form-item>
  <el-form-item label="社团类型" prop="clubtype">
    <el-select v-model="ruleForm.clubtype" placeholder="请选择社团类型...">
      <el-option label="思想政治类" value=1></el-option>
      <el-option label="学术科技类" value=2></el-option>
      <el-option label="体育竞技类" value=3></el-option>
      <el-option label="志愿公益类" value=4></el-option>
      <el-option label="文化艺术类" value=5></el-option>
    </el-select>
  </el-form-item>

  <!-- 社团所在校区 -->
  <el-form-item label="所在校区" prop="address">
    <el-select v-model="ruleForm.address" placeholder="请选择校区...">
      <el-option label="南校区" value=1></el-option>
      <el-option label="北校区" value=2></el-option>
      <el-option label="珠海校区" value=3></el-option>
      <el-option label="深圳校区" value=4></el-option>
      <el-option label="北校区" value=5></el-option>
      <el-option label="五校园" value=6></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="开展单位" prop="level">
      <el-radio-group v-model="ruleForm.level" @change="handleLevelChange">
        <el-radio label="校级">校级</el-radio>
        <el-radio label="院级">院级</el-radio>
      </el-radio-group>
      <el-form-item prop="college">
      <el-input  v-if="ruleForm.level === '院级'" v-model="ruleForm.college" placeholder="请输入具体学院" style="margin-left: 10px;"></el-input>
    </el-form-item>
    </el-form-item>

  <!-- 社团简介 -->
    <el-form-item label="社团简介" prop="Introduction">
    <el-input type="textarea" v-model="ruleForm.Introduction"></el-input>
  </el-form-item>

  <!-- 社团宗旨 -->
  <el-form-item label="社团宗旨" prop="createAim">
    <el-input type="textarea" v-model="ruleForm.createAim"></el-input>
  </el-form-item>


  <!-- 社团申请理由 -->
  <el-form-item label="申请理由" prop="createReason">
    <el-input type="textarea" v-model="ruleForm.createReason"></el-input>
  </el-form-item>

  <!-- <div>
    <el-upload
      class="upload-demo"
      action="/uploadFile"
      method="POST"
      auto-upload="true"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-upload="beforeUploadFile"
      :before-remove="beforeRemove"
      :on-success="handleSuccess"
    >
      <el-button size="small" type="primary">点击上传申请表</el-button>

    </el-upload>
  </div> -->


  <div>
    <input type="file" @change="handleFileChange">
    <button @click="uploadFile">Upload</button>
  </div>

  <!-- 确认按钮和重置按钮 -->
  <el-form-item>
    <el-button type="primary" @click="handleCreate()">确定申请</el-button>
    <el-button @click="resetForm('ruleForm')">重置信息</el-button>
  </el-form-item>
</el-form>

            <el-row>
                <el-col :span="12">

                </el-col>

                <el-col :span="12">

            </el-col>
            </el-row>
        </div>

    </el-main>
    </el-container>
    </template>

    <script>
    // eslint-disable-next-line no-unused-vars
    import axios from 'axios';
    import { ElMessage } from 'element-plus';
    export default {

     name: 'CreateClub',
     data(){
        return{
          uid:1,
            ruleForm: {
              clubname:'',
              leadername:'',
              leaderID:'',
              clubtype:'',
              address:'',
              level:'',
              college:'',
              createAim:'',
              createReason:'',
              teacherName:'',
              teacherPhone:'',
              Introduction:'', //社团简介
        },
     rules: {
      clubname:[{required: true, message: '请输入活动名称', trigger: 'blur'}],

              leadername:[{required: true,message: '请输入社长姓名', trigger: 'blur'}],
              leaderID:[{required: true,message: '请输入社长学号', trigger: 'blur'}],
              clubtype:[{required: true,message: '请选择社团类型', trigger: 'change'}],
              address:[{required: true,message: '请选择社团地址', trigger: 'change'}],
              clubMail:[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }],
              level:[{required: true,message: '请选择社团等级', trigger: 'change'}],
              college:[{required: true,message: '请输入所属学院', trigger: 'blur'}],
              createAim:[{required: true,message: '请填写社团宗旨', trigger: 'blur'}],
              createReason:[{required: true,message: '请填写申请理由', trigger: 'blur'}],
              teacherName:[{required: true,message: '请选择指导老师姓名', trigger: 'blur'}],
              teacherPhone:[{required: true,message: '请填写电话号码', trigger: 'blur'},
              { max: 11, message: '请输入正确的手机号码', trigger: 'blur' }],
              Introduction:[{required: true,message: '请填写社团简介', trigger: 'blur'}], //社团简介

        }
      };
    },
    methods:{

      handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    async uploadFile() {
      if (!this.selectedFile) {
        alert('Please select a file.');
        return;
      }

      const formData = new FormData();
      formData.append('file', this.selectedFile);

      try {
        const response = await axios.post('http://localhost:8080/uploadFile', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        console.log('Success:', response.data);
        alert('File uploaded successfully!'); //8081端口显示：....
      } catch (error) {
        console.error('Error:', error);
        alert('Failed to upload file.');
      }
    },
      // 处理申请表文件的函数
    //   handlePreview(file) {
    //   // 文件预览操作
    // },
    // handleRemove(file, fileList) {
    //   // 文件移除操作
    // },

    // 上传社团图片之前的检查
    beforeUploadPic(file) {
      const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';

      if (!isJPGOrPNG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
      }
      return isJPGOrPNG;
    },

    // eslint-disable-next-line no-unused-vars
    beforeUploadFile(file) {

      return true;
    },

    // eslint-disable-next-line no-unused-vars
    beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }?`);
      },

      // 上传申请表
      handleSuccess(response, file) {
      // 文件上传成功后的回调
      console.log('File uploaded successfully:', response, file);

      // // 创建 FormData 对象并附加文件信息
      // const fileData = new FormData();
      // fileData.append('fileName', file.name);
      // fileData.append('fileUrl', response.url); // 假设后端返回的响应中有上传文件的URL

      // // 使用 axios 发送 POST 请求到后端
      // axios.post('/api/saveFileInfo', fileData)
      //   .then(res => {
      //     this.$message.success("文件信息保存成功！");
      //     console.log('File info saved successfully:', res);
      //   })
      //   .catch(error => {
      //     console.error('Error saving file info:', error);
      //   });
    },

    submitForm(formName) {
      // 检查表单是否通过验证
        this.$refs[formName].validate((valid) => {

          if (valid) {
            alert('submit!');

            const CreateClubData = new FormData();
            CreateClubData.append('uid',this.uid);
            CreateClubData.append('Cname',this.ruleForm.clubname)
            CreateClubData.append('Type',this.ruleForm.clubtype)
            CreateClubData.append('Address',this.ruleForm.address)
            CreateClubData.append('leadername',this.ruleForm.leadername)
            CreateClubData.append('leaderID',this.ruleForm.leaderID)
            CreateClubData.append('college',this.ruleForm.college)
            CreateClubData.append('createAim',this.ruleForm.createAim)
            CreateClubData.append('createReason',this.ruleForm.createReason)
            CreateClubData.append('teacherName',this.ruleForm.teacherName)
            CreateClubData.append('teacherPhone',this.ruleForm.teacherPhone)
            CreateClubData.append('clubPhone',this.ruleForm.clubPhone)
            CreateClubData.append('clubMail',this.ruleForm.clubMail)
            CreateClubData.append('Introduction',this.ruleForm.Introduction)

            axios.post('api/club/createClub', CreateClubData)
            .then(response => {
              ElMessage.success("您已成功提交创建社团申请！");

              console.log('Form submitted successfully:', response);

            })
            .catch(error => {
              console.error('Error submitting form:', error);
            });
          }

          else {
            alert('请将信息填写完整！')
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleCreate(){
        this.submitForm('ruleForm');
        this.uploadFile();
      },

      handleLevelChange(value) {
      if (value !== '院级') {
        this.ruleForm.department = '';
      }
    }

    }
    }
    </script>
